# splash.vue
<template>
	<view class="splash-container" :style="{ opacity: containerOpacity }">
		<view class="logo-container" :style="{ transform: `scale(${logoScale})` }">
			<!-- SVG Logo -->
			<image class="logo" :src="logoUrl" mode="aspectFit" :style="{ opacity: logoOpacity }" />
		</view>
		<view class="loading-bar">
			<view class="loading-progress" :style="{ width: `${progress}%` }"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoScale: 0.8,
				logoOpacity: 0,
				progress: 0,
				containerOpacity: 1,
				logoUrl: '/static/image/logo.svg' // 确保将SVG保存到此路径
			}
		},
		onLoad() {
			this.startAnimations()
		},
		methods: {
			startAnimations() {
				// Logo缩放动画
				const scaleDuration = 1000
				const scaleSteps = 20
				const scaleIncrement = 0.2 / scaleSteps
				let scaleCount = 0

				const scaleInterval = setInterval(() => {
					if (scaleCount >= scaleSteps) {
						clearInterval(scaleInterval)
						return
					}
					this.logoScale += scaleIncrement
					scaleCount++
				}, scaleDuration / scaleSteps)

				// Logo淡入动画
				setTimeout(() => {
					const fadeDuration = 1000
					const fadeSteps = 20
					const fadeIncrement = 1 / fadeSteps
					let fadeCount = 0

					const fadeInterval = setInterval(() => {
						if (fadeCount >= fadeSteps) {
							clearInterval(fadeInterval)
							return
						}
						this.logoOpacity += fadeIncrement
						fadeCount++
					}, fadeDuration / fadeSteps)
				}, 500)

				// 进度条动画
				const progressDuration = 2000
				const progressSteps = 100
				let progressCount = 0

				const progressInterval = setInterval(() => {
					if (progressCount >= progressSteps) {
						clearInterval(progressInterval)
						this.finishSplash()
						return
					}
					this.progress = progressCount
					progressCount++
				}, progressDuration / progressSteps)
			},
			finishSplash() {
				// 等待一小段时间后开始淡出动画
				setTimeout(() => {
					const fadeOutDuration = 500
					const fadeOutSteps = 20
					const fadeOutIncrement = 1 / fadeOutSteps
					let fadeOutCount = 0

					const fadeOutInterval = setInterval(() => {
						if (fadeOutCount >= fadeOutSteps) {
							clearInterval(fadeOutInterval)
							// 跳转到主页面
							uni.reLaunch({
								url: '/pages/index/index'
							})
							return
						}
						this.containerOpacity -= fadeOutIncrement
						fadeOutCount++
					}, fadeOutDuration / fadeOutSteps)
				}, 500)
			}
		}
	}
</script>

<style>
	.splash-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logo-container {
		width: 400rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo {
		width: 100%;
		height: 100%;
	}

	.loading-bar {
		width: 400rpx;
		height: 6rpx;
		background: #e0e0e0;
		border-radius: 6rpx;
		margin-top: 60rpx;
		overflow: hidden;
	}

	.loading-progress {
		height: 100%;
		background: #2563eb;
		transition: width 0.1s linear;
	}
</style>